<template>
  <el-tooltip class="item" :effect="effect"
              :disabled="disabled"
              :placement="placement" :open-delay="openDelay"
              :popper-class="popperClass"
  >
    <div slot="content" :style="{width: actionWrapWidth}">
      {{ text }}
    </div>
    <div @mouseenter="onmouseenter()" class="text_container" :style="{width: width}" ref="text_container">
      <span ref="show_text" class="show_text">{{ text }}</span>
    </div>
  </el-tooltip>
</template>

<script>
export default {
  name: "BeyondWidthTip",
  props: {
    width: {
      type: String,
      default: function() {
        return "100%";
      }
    },
    wrapWidth: {
      type: String,
      default: function() {
        return "100%";
      }
    },
    text: {
      type: String,
      default: function() {
        return "";
      }
    },
    effect: {
      type: String,
      default: function() {
        return "dark";
      }
    },
    placement: {
      type: String,
      default: function() {
        return "top";
      }
    },
    openDelay: {
      type: Number,
      default: function() {
        return 0;
      }
    },
    popperClass: {
      type: String,
      default: function() {
        return "";
      }
    }
  },
  data: function() {
    return {
      disabled: true,
      actionWrapWidth: '100%'
    };
  },
  methods: {
    showTextWidth: function() {
      return this.$refs["show_text"] ? this.$refs["show_text"].offsetWidth : 0;
    },
    textContainerWidth: function() {
      return this.$refs["text_container"] ? this.$refs["text_container"].offsetWidth : 0;
    },
    onmouseenter: function() {
      this.disabled = (this.showTextWidth() < this.textContainerWidth());
      if (this.disabled) return
      this.actionWrapWidth = this.wrapWidth.includes('px') ? this.wrapWidth : this.textContainerWidth() * Number(this.wrapWidth.split('%')[0]) / 100 + 'px'
    }
  }
};
</script>

<style scoped>
.text_container {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid greenyellow;
}
</style>